<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>智慧社区-社区报修</title>

    <!-- Bootstrap -->
    <%--<link rel="stylesheet" href="<s:url value="/assets/css/ace.css"></s:url>" class="ace-main-stylesheet" id="main-ace-style" />--%>
    <link href="<s:url value="/assets/front/css/bootstrap.min.css"></s:url>" rel="stylesheet">
    <link rel="stylesheet" href="<s:url value="/assets/css/font-awesome.css"></s:url>" />
    <link rel="stylesheet" href="<s:url value="/assets/css/datepicker.css"></s:url>" />
    <link rel="stylesheet" type="text/css" href="<s:url value="/assets/front/css/common.css"></s:url>" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

        .tabs-left > .nav-tabs {
            top: auto;
            margin-bottom: 0;
            border-color: #c5d0dc;
            float: left;
        }

        .nav-tabs {
            border-color: #C5D0DC;
            margin-bottom: 0 !important;
            margin-left: 0;
            position: relative;
            top: 1px;
        }

        ul, ol {
            margin-top: 0;
            margin-bottom: 10px;
            margin-right: 0;
            margin-left: 25px;
            padding: 0;
        }

        .tabs-left > .nav-tabs > li {
            float: none !important;
        }

        .nav-tabs > li > a {
            padding: 7px 12px 8px;
        }
        .nav-tabs > li > a, .nav-tabs > li > a:focus {
            border-radius: 0 !important;
            border-color: #c5d0dc;
            background-color: #F9F9F9;
            color: #999;
            margin-right: -1px;
            line-height: 18px;
            position: relative;
        }
        .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a {
            min-width: 60px;
        }
        .tabs-left > .nav-tabs > li > a, .tabs-left > .nav-tabs > li > a:focus, .tabs-left > .nav-tabs > li > a:hover {
            border-color: #c5d0dc;
            margin: 0 -1px 0 0;
        }
        .ace-icon {
            text-align: center;
        }
        .nav-tabs li .ace-icon {
            width: 1.25em;
            display: inline-block;
            text-align: center;
        }
        .nav-tabs > li > a > .ace-icon {
            opacity: 0.75;
        }
        .pink {
            color: #c6699f !important;
        }
        .bigger-110 {
            font-size: 110% !important;
        }
        .nav-tabs > li.active > a > .badge, .nav-tabs > li.active > a > .ace-icon {
            opacity: 1;
        }
        .blue {
            color: #478fca !important;
        }

        .tabs-left > .nav-tabs > li.active > a, .tabs-left > .nav-tabs > li.active > a:focus, .tabs-left > .nav-tabs > li.active > a:hover {
            border-color: #c5d0dc;
            border-top-width: 1px;
            border-left: 2px solid #4c8fbd;
            border-right-color: transparent !important;
            margin: 0 -1px 0 -1px;
            -webkit-box-shadow: -2px 0 3px 0 rgba(0,0,0,0.15) !important;
            box-shadow: -2px 0 3px 0 rgba(0,0,0,0.15) !important;
        }
        .tab-content {
            border: 1px solid #c5d0dc;
            padding: 16px 12px;
            position: relative;
        }
        .tabs-left .tab-content, .tabs-right .tab-content {
            overflow: auto;
        }
        .form-group{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }


    </style>
</head>
<body>
<%@include file="/WEB-INF/views/front/include/menu.jsp"%>
    <div class="container" style="background-color: #ffffff;margin-top: 20px" >
        <div class="row" style="margin-top: 20px;margin-bottom: 20px" >
            <div class="col-sm-11" style="margin-left: 20px">
                <!-- #section:elements.tab.position -->
                <div class="tabbable tabs-left">
                    <ul class="nav nav-tabs" id="myTab3">
                        <li class="active">
                            <a data-toggle="tab" href="#home3">
                                <i class="pink ace-icon fa fa-tachometer bigger-110"></i>
                                基本信息
                            </a>
                        </li>

                        <li>
                            <a data-toggle="tab" href="#profile3">
                                <i class="blue ace-icon fa fa-user bigger-110"></i>
                                修改密码
                            </a>
                        </li>

                       <%-- <li>
                            <a data-toggle="tab" href="#dropdown13">
                                <i class="ace-icon fa fa-rocket"></i>
                                绑定住宅
                            </a>
                        </li>--%>
                    </ul>

                    <div class="tab-content" >
                        <div id="home3" class="tab-pane in active">
                            <form:form commandName="datebean" cssClass="form-horizontal" role="form" id="base-user">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="name"><font color="red">*</font>昵称：</label>
                                    <div class="col-sm-8">
                                    <input type="text" name="name" id="name" placeholder="请输入昵称" value="${datebean.name}" class="form-control required">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="gender"><font color="red">*</font>性别</label>
                                    <div class="col-sm-8">
                                        <form:select path="gender" items="${redis:getDictList('Gender',false)}" itemValue="basId" itemLabel="name" cssClass="form-control"></form:select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="birthday">出生日期</label>
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <input type="text" name="birthday" id="birthday"  class="form-control date-picker"  readonly value="${datebean.birthday}" />
                                            <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="nativeAddr">籍贯</label>
                                    <div class="col-sm-8">
                                     <input type="text" name="nativeAddr" id="nativeAddr" placeholder="籍贯" value="${datebean.nativeAddr}" class="form-control ">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="nation">民族</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="nation" id="nation" placeholder="民族" value="${datebean.nation}" class="form-control ">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="politicalOutlook">政治面貌</label>
                                    <div class="col-sm-8">
                                     <input type="text" name="politicalOutlook" id="politicalOutlook" placeholder="政治面貌" value="${datebean.politicalOutlook}" class="form-control ">
                                    </div>
                                </div>

                                <div class="form-group">
                                  <label class="col-sm-2 control-label no-padding-right" for="idCard">身份证号码</label>
                                  <div class="col-sm-8">
                                    <input type="text" name="idCard" id="idCard" placeholder="身份证号码" value="${datebean.idCard}" class="form-control ">
                                  </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="email">电子邮箱</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="email" id="email" placeholder="电子邮箱"   value="${datebean.email}" class="form-control ">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="mobile">联系电话</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="mobile" id="mobile" placeholder="联系电话"   value="${datebean.idCard}" class="form-control ">
                                    </div>
                                </div>

                            </form:form>
                            <h3 class="header smaller lighter green"></h3>
                            <div class="text-center">
                                <button class="btn btn-info" id="save">保存</button>
                            </div>
                        </div>

                        <div id="profile3" class="tab-pane">
                            <form class="form-horizontal" role="form" id="base-password">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="oldPassword"><font color="red">*</font>旧密码</label>
                                    <div class="col-sm-8">
                                        <input type="password" name="oldPassword" id="oldPassword" placeholder="旧密码" class="form-control required">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right" for="password"><font color="red">*</font>新密码</label>
                                    <div class="col-sm-8">
                                        <input type="password" name="password" id="password" placeholder="新密码" class="form-control required">
                                    </div>
                                </div>
                            </form>
                            <h3 class="header smaller lighter green"></h3>
                            <div class="text-center">
                                <button class="btn btn-info" id="edit_password">修改</button>
                            </div>
                        </div>

                        <%--<div id="dropdown13" class="tab-pane">

                        </div>--%>
                    </div>
                </div>

                <!-- /section:elements.tab.position -->
            </div><!-- /.col -->
        </div>

    </div>



<%@include file="/WEB-INF/views/front/include/footer.jsp"%>
<script src="<s:url value="/assets/js/valid/jquery.validate.js"></s:url>"></script>
<script src="<s:url value="/assets/js/valid/messages_cn.js"></s:url>"></script>
<script src="<s:url value="/assets/js/date-time/bootstrap-datepicker.js"></s:url>"></script>
<script type="text/javascript">

    jQuery(function($) {
        $('.date-picker').datepicker({
            inline: true,
            format:"yyyy-mm-dd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        })
        //show datepicker when clicking on the icon
      /*      .next().on(ace.click_event, function(){
            $(this).prev().focus();
        });*/
    });

    $("#save").click(function () {
        save();
    });

    function save() {
        if($("#base-user").valid()) {
            $.ajax({
                type : "post",
                url : "${pageContext.request.contextPath}/pass/user/edit",
                data: $("#base-user").serialize(),
                dataType : "json",
                success : function(datas) {
                    if(datas.code == '200'){
                        alert("修改成功")
                    } else if(datas.code == '500') {
                        alert(datas.message);
                    } else {
                        location.href = "${pageContext.request.contextPath}/login";
                    }
                },
                error :function(xhr) {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            });
        }

    }


    $("#edit_password").click(function () {
        edit_password();
    });

    function edit_password() {
        if($("#base-password").valid()) {
            $.ajax({
                type : "post",
                url : "${pageContext.request.contextPath}/pass/user/password/edit",
                data: $("#base-password").serialize(),
                dataType : "json",
                success : function(datas) {
                    if(datas.code == '200'){
                        alert("修改成功");
                        $("#base-password")[0].reset();
                        location.href = "${pageContext.request.contextPath}/logout";
                    } else if(datas.code == '500') {
                        alert(datas.message);
                    } else {
                        location.href = "${pageContext.request.contextPath}/login";
                    }
                },
                error :function(xhr) {
                    location.href = "${pageContext.request.contextPath}/login";
                }
            });
        }

    }
</script>
</body>
</html>
